<template>
    <div style="text-align: center;margin-top: 30px">
        <el-steps :active="active" finish-status="success" align-center>
            <el-step title="输入账号"></el-step>
            <el-step title="验证身份"></el-step>
            <el-step title="重置密码"></el-step>
        </el-steps>
        <div style="text-align: center;margin-top: 30px" v-if="active===0">
            <el-col>
                <el-row>
                    <el-col :span="8" :offset="8">
                        <el-card shadow="never" style="background-color: #E6A23C">
                            请先填写表单，验证您的身份
                            <br><br>
                            系统将会重置您的密码，并将该密码发送到您的邮箱
                        </el-card>
                    </el-col>
                </el-row>
                <el-row style="margin-top: 30px">
                    请输入您的账号:
                    <el-input style="width: 300px" v-model="account"></el-input>
                </el-row>
                <!--                <el-row style="margin-top: 30px">-->
                <!--                    请输入您的用户名:-->
                <!--                    <el-input style="width: 300px" v-model="username"></el-input>-->
                <!--                </el-row>-->
            </el-col>
            <el-button style="margin-top: 30px;" @click="toLogin" type="primary">返回登录</el-button>
            <el-button style="margin-top: 12px;" @click="success1" type="success">下一步</el-button>
        </div>
        <div style="text-align: center;margin-top: 30px" v-if="active===1">
            <el-col>
                <el-row>
                    <el-col :span="8" :offset="8">
                        <el-card shadow="never" style="background-color: #E6A23C">
                            为了您的账号安全，我们将会把密码发送到您的邮箱
                            <br><br>
                            <span style="color:blue;">您的邮箱为：{{ email }}</span>
                        </el-card>
                    </el-col>
                </el-row>
            </el-col>
            <el-button style="margin-top: 30px;" @click="pre" type="primary">上一步</el-button>
            <el-button style="margin-top: 12px;" @click="success2" type="success">确认重置密码</el-button>
        </div>
        <div style="text-align: center;margin-top: 30px" v-if="active===2">

            <el-row>
                <el-col :span="8" :offset="8">
                    <el-card shadow="never" style="background-color: #67C23A">
                        <el-button type="" icon="el-icon-check" circle disabled></el-button>
                        您的密码已经修改完毕
                    </el-card>
                </el-col>
            </el-row>
            <el-button style="margin-top: 30px;" @click="pre" type="primary">上一步</el-button>
            <el-button style="margin-top: 12px;background-color: #909399;color: white" @click="toLogin">返回登录
            </el-button>
        </div>
    </div>


</template>


<script>
import axios from "axios";

export default {
    data() {
        return {
            active: 0,
            account: "",
            username: "",
            code: 0,
            email: "",
        };
    },

    methods: {
        pre() {
            if (this.active-- < 0) this.active = 2;
        },
        next() {
            if (this.active++ > 1) this.active = 0;
        },
        toLogin() {
            this.$router.push({
                path: "/1",
            })
        },
        async success1() {
            if (this.account === "") {
                this.$message({
                    message: "账号不能为空",
                    type: "error",
                    duration: 2000
                })
                return;
            }
            const that = this;
            await axios.post("http://localhost:8848/user/findUserByAccount", {
                account: that.account,
            }).then(function (response) {
                    console.log(response);
                    that.code = response.data.code;
                if (response.data.code == 0) {
                    that.email = response.data.data.email;
                }
                }
            );
            console.log("邮箱："+this.email)
            if (this.code !== 0) {
                this.$message({
                    message: "账号不存在",
                    type: "error",
                    duration: 2000,
                });
            } else if (this.email==="" || this.email==="null"){
                this.$message({
                    message: "该用户未填写邮箱，请联系管理员修改密码",
                    type: "error",
                    duration: 2000
                })
            }
            else {
                this.$message({
                    message: "查询信息成功",
                    type: "success",
                    duration: 2000,
                });
                if (this.active++ > 1) this.active = 0;
            }
        },
        async success2() {
            var that = this;
            await axios.post("http://localhost:8848/email/resetPassword", {
                email: this.email,
                account: this.account,
            }).then(function (response) {
                    console.log(response)
                    that.code = response.data.code;
                }
            );
            if (this.code === 0) {
                if (this.active++ > 1) this.active = 0;
                this.$notify({
                    title: "密码修改成功，请查看邮件",
                    type: "success",
                    duration: 2000
                })
            } else {
                this.$message({
                    message: "数据库异常，请联系管理员",
                    type: "error",
                    duration: 2000
                })
                return;
            }
        },
        commonFeedBack2(data) {
            console.log("common2")
            if (data.response.data.email === "") {
                this.$message({
                    message: "该用户未填写邮箱，请联系管理员修改密码",
                    type: "error",
                    duration: 2000
                })
            }
        }
    }
}
</script>


<style>
.transition-box {
    margin-bottom: 10px;
    width: 200px;
    height: 100px;
    border-radius: 4px;
    background-color: #409EFF;
    text-align: center;
    color: #fff;
    padding: 40px 20px;
    box-sizing: border-box;
    margin-right: 20px;
}
</style>
